<template>
	<view class="pageContainer" :class="vi_pageSize">
		<vi-notify :top="topfix" ref="vi_notify"></vi-notify>
		<module-loading ref="vi_loading" :loading="vi_loading" :loadingMask="vi_loadingMask"></module-loading>
		<vi-headbar goback>
			<view slot="right">
				响应式
				<text class="response">开启</text>
				<text class="noresponse color-warning">关闭</text>
			</view>
			{{vi_pageTitle}}
		</vi-headbar>
		
		<view class="docTable">
			<view class="th">
				<view>属性名</view>
				<view>类型</view>
				<view>默认值</view>
				<view>描述</view>
			</view>
			<view class="tr">
				<view>type</view>
				<view>String</view>
				<view>primary</view>
				<view>主题色</view>
			</view>
			<view class="tr">
				<view>color</view>
				<view>String</view>
				<view>无</view>
				<view>自定主题色</view>
			</view>
			<view class="tr">
				<view>textColor</view>
				<view>String</view>
				<view>无</view>
				<view>固定文字色</view>
			</view>
			<view class="tr">
				<view>radius</view>
				<view>String, Number</view>
				<view>0.25em</view>
				<view>按钮圆角，需带单位，或0</view>
			</view>
			<view class="tr">
				<view>size</view>
				<view>String</view>
				<view>md</view>
				<view>预定义按钮尺寸</view>
			</view>
			<view class="tr">
				<view>plain</view>
				<view>Boolean</view>
				<view>false</view>
				<view>按钮镂空</view>
			</view>
			<view class="tr">
				<view>titleHeight</view>
				<view>String</view>
				<view>2.5em</view>
				<view>按钮行高度，需带单位</view>
			</view>
			<view class="tr">
				<view>rowHeight</view>
				<view>String</view>
				<view>2.5em</view>
				<view>按钮行高度，需带单位</view>
			</view>
			<view class="tr">
				<view>rowSpace</view>
				<view>Number</view>
				<view>0.2</view>
				<view>按钮行间距，固定单位em</view>
			</view>
			<view class="tr">
				<view>mode</view>
				<view>String</view>
				<view>radio</view>
				<view>选择类型，radio单选、checkbox多选、range选区</view>
			</view>
			<view class="tr">
				<view>value</view>
				<view></view>
				<view></view>
				<view>当前值，作为基准时间，必须是合法的时间值</view>
			</view>
			<view class="tr">
				<view>titleClass</view>
				<view>String</view>
				<view>无</view>
				<view>标题栏样式名，请使用全局样式</view>
			</view>
			<view class="tr">
				<view>iconClass</view>
				<view>String</view>
				<view>无</view>
				<view>前后翻页按钮的样式名，请使用全局样式</view>
			</view>
			<view class="tr">
				<view>start</view>
				<view>Number, String</view>
				<view>无</view>
				<view>可选范围开始点，开启年选择后必须是时间值，未开启年选择必须是月份值</view>
			</view>
			<view class="tr">
				<view>end</view>
				<view>Number, String</view>
				<view>无</view>
				<view>可选范围结束点，开启年选择后必须是时间值，未开启年选择必须是月份值</view>
			</view>
			<view class="tr">
				<view>min</view>
				<view>Number</view>
				<view>1</view>
				<view>最小选择数，多选使用</view>
			</view>
			<view class="tr">
				<view>max</view>
				<view>Number</view>
				<view>0</view>
				<view>最大选择数，多选使用</view>
			</view>
			<view class="tr">
				<view>resFormat</view>
				<view>String</view>
				<view>无</view>
				<view>返回数据格式，开启年选择时可选timestamp，ISO，UTC，和自定义格式串。不开启年选择只能返回月份值</view>
			</view>
			<view class="tr">
				<view>useYear</view>
				<view>Boolean</view>
				<view>false</view>
				<view>开启年选择器</view>
			</view>
			<view class="tr">
				<view>useToolbar</view>
				<view>Boolean</view>
				<view>true</view>
				<view>使用工具栏，多选时显示已选列表</view>
			</view>
			<view class="tr">
				<view>useSubmit</view>
				<view>Boolean</view>
				<view>false</view>
				<view>使用提交按钮</view>
			</view>
			<view class="tr">
				<view>submitWidth</view>
				<view>String, Number</view>
				<view>0</view>
				<view>提交按钮宽度</view>
			</view>
			<view class="tr">
				<view>submitRadius</view>
				<view>String, Number</view>
				<view>circle</view>
				<view>提交按钮圆角</view>
			</view>
			<view class="tr">
				<view>submitSize</view>
				<view>String</view>
				<view>md</view>
				<view>提交按钮预定尺寸</view>
			</view>
			<view class="tr">
				<view>submitPlain</view>
				<view>Boolean</view>
				<view>false</view>
				<view>提交按钮镂空</view>
			</view>
			<view class="tr">
				<view>submitHeight</view>
				<view>Number, String</view>
				<view>无</view>
				<view>提交按钮高度</view>
			</view>
			<view class="tr extra">
				<view class="body">
					<view>icon</view>
					<view>Object</view>
					<view></view>
					<view>自定义图标替换</view>
				</view>
				<view class="appendix">
					格式：{key:"图标名"}
					<view>prev：icon-arr-left  上一月</view>
					<view>next：icon-arr-right  下一月</view>
					<view>prevYear：icon-arr-double-left  上一年</view>
					<view>nextYear：icon-arr-double-right  下一年</view>
					<view>delete：icon-delete-small  删除</view>
					<view>to：icon-arr-double-right  至</view>
				</view>
			</view>
			<view class="tr extra">
				<view class="body">
					<view>text</view>
					<view>Object</view>
					<view></view>
					<view>内部文字数据覆盖</view>
				</view>
				<view class="appendix">
					格式：{key:"文字"}
					<view>confirm：确定　提交按钮</view>
					<view>unitMonth：月　月单位</view>
					<view>monthSelected：已选　工具栏文字</view>
					<view>tipMonthEmptyError：请选择一个选项　出错提示</view>
					<view>tipMonthMinError：请至少选择{$min}个选项　出错提示</view>
					<view>tipMonthMaxError：请选择{$min}至{$max}个选项　出错提示</view>
					<view>tipMonthRangeError：请选择选项范围　出错提示</view>
				</view>
			</view>
			<view class="tr">
				<view>disabled</view>
				<view>Boolean</view>
				<view>false</view>
				<view>禁用</view>
			</view>
			<view class="tr">
				<view>readOnly</view>
				<view>Boolean</view>
				<view>false</view>
				<view>只读</view>
			</view>
			<view class="tr">
				<view>@change</view>
				<view>事件</view>
				<view></view>
				<view>选中变更，根据mode类型提交选中值的年数值、选择列表数组、选区数组。数据格式依照resFormat确定</view>
			</view>
			<view class="tr">
				<view>@ready</view>
				<view>事件</view>
				<view></view>
				<view>外部赋值变更完成，根据mode类型提交选中值的年数值、选择列表数组、选区数组。数据格式依照resFormat确定</view>
			</view>
			<view class="tr">
				<view>@submit</view>
				<view>事件</view>
				<view></view>
				<view>点击提交按钮，根据mode类型提交选中值的年数值、选择列表数组、选区数组。数据格式依照resFormat确定</view>
			</view>
		</view>
		
		<view class="p-sm">
			<view class="py-sm">
				基本使用：{{`&lt;vi-month @change="选中处理">&lt;/vi-month>`}}
			</view>
			<view class="py-sm">
				<vi-month></vi-month>
			</view>
			<view class="py-sm">
				<view class="py-sm">
					多选：
				</view>
				<vi-month mode="checkbox"></vi-month>
			</view>
			<view class="py-sm">
				<view class="py-sm">
					选区：
				</view>
				<vi-month mode="range"></vi-month>
			</view>
			<view class="py-sm">
				<view class="py-sm">
					开启年选择：
				</view>
				<vi-month mode="checkbox" useYear plain></vi-month>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
.response{
	display: if($useResponse, inline, none);
}
.noresponse{
	display: if($useResponse, none, inline);
}
</style>
